<template>
	<div class="goodsItem" @click="gotoInfo">
		<image :src="img" mode="widthFix" class="image"></image>
		<p class="desc">{{ goods.desc }}</p>
		<view class="pf">
			<view class="" style="color: red; font-weight: 700">{{ goods.price }}</view>
			<view class="" style="color: #aaa">{{ goods.f_count.length }}人想要</view>
		</view>
		<view class="user">
			<image :src="reImg(goods.userId.img[0])" mode="" class="tx"></image>
			<view class="userName">{{ goods.userId.nickName }}</view>
		</view>
	</div>
</template>

<script>
import config from '../../utils/config';
export default {
	props: ['goods'],
	data() {
		return {};
	},
	computed: {
		img: function() {
			return config['resource'] + this.goods.img;
		}
	},
	methods: {
		reImg(img) {
			if (/http/.test(img)) {
				return img;
			}
			return config['resource'] + img;
		},
		gotoInfo() {
			this.$store.commit('addGoods', this.goods);
			uni.navigateTo({
				url: '/pages/goodsInfo/goodsInfo?_id=' + this.goods._id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goodsItem {
	display: flex;
	flex-direction: column;
	margin-bottom: 30rpx;
	.image {
		width: 330rpx;
		border-radius: 20rpx;
	}
	.desc {
		font-size: 32rpx;
		font-weight: 700;
		margin: 20rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pf {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
	}
	.tx {
		width: 70rpx;
		height: 50rpx;
		border-radius: 25rpx;
		margin-right: 20rpx;
		margin-left: 10rpx;
	}
	.user {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.userName {
		width: 100%;
		overflow: hidden;
		font-size: 24rpx;
		color: #aaa;
	}
}
</style>
